<template>
  <!--格兰富格知汇业务能力基础认证页面 -->
  <view class="entire">
    <image
      style="z-index: -10; position: fixed; top: -10vh; width: 100vw; height: 110vh"
      :src="certBg"
      mode="aspectFill"
    />
    <view style="margin-top: 620rpx">
      <steps :options="options" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { getStagePlan } from '@/service/stage/stage'
import steps from '@/components/steps/steps.vue'
import { certBg } from '@/static/imgMap'
import { imgStep1, imgStep2, imgStep3 } from '@/static/iconsMap'
const options = ref([
  {
    stage: 1,
    title: '第一阶段：走进格兰富',
    content: '您将学习格兰富通用课程，帮助您快速的了解格兰富的企业文化和相关制度',
    img: imgStep1,
    backImg: '',
    done: true,
  },
  {
    stage: 2,
    title: '第二阶段：专业知识入门',
    content: '根据您的部门和职位，学习业务知识相关课程，帮助您快速掌握未来工作中的业务知识',
    img: imgStep2,
    backImg: '',
    done: false,
  },
  {
    stage: 3,
    title: '第三阶段：未来学习之路',
    content: '新人学习即将结束，您在格兰富的深度学习之路即将开始',
    img: imgStep3,
    backImg: '',
    done: false,
  },
])

onMounted(async () => {
  const response = await getStagePlan()
  for (let i = 0; i < response.data.length; i++) {
    if (response.data[i].isComplete === true && i + 1 < options.value.length) {
      options.value[i + 1].done = true
    }
    options.value[i].backImg = response.data[i].frontImage
  }
})
</script>
<style scoped lang="scss">
.entire {
  width: 100%;
}
</style>
